import useModal from '@/hooks/modalHook'
import { defineComponent, reactive, watch } from 'vue'

export namespace ScoreSummarizeModalEmits {
  export type ConfirmArg = string | undefined
  export type Confirm = (data: ConfirmArg) => true
}

const ScoreSummarizeModal = defineComponent({
  props: {
    visible: Boolean
  },
  emits: {
    'update:visible': (data: boolean): boolean => true,
    confirm: (data: ScoreSummarizeModalEmits.ConfirmArg): boolean => true
  },
  setup(props, {emit}) {
    const {visible, openModal, closeModal} = useModal()

    let state = reactive<{
      summarize: string
    }>({
      summarize: ''
    })

    watch(
      () => props.visible,
      n => {
        if (n) {
          openModal()
        } else {
          closeModal()
        }
      },
      {immediate: true}
    )

    watch(
      () => visible.value,
      n => {
        emit('update:visible', n)
        // 关闭后清空状态
        if (!n) {
          state.summarize = ''
        }
      }
    )

    function handleModalConfirm() {
      emit('confirm', state.summarize)
      closeModal()
    }

    return () => (
      <a-modal
        class='custom-modal w-1/3'
        title='评分'
        v-model={[visible.value, 'visible']}
        onOk={handleModalConfirm}
      >
        <div class='my-8 p-8'>
          <a-form-item label='评分总结：'>
            <a-textarea v-model={[state.summarize, 'value']} row={6}></a-textarea>
          </a-form-item>
        </div>
      </a-modal>
    )
  }
})

export default ScoreSummarizeModal
